import Base from "../../base.js";

export default class Studentdetail extends Base {
    constructor(id, stuId) {
        super(id);
        this.studenId = stuId;
        this.mouted()

    }
    mouted() {

        $.ajax({
            type: "get",
            url: "/api/student/studentDetail/" + this.studenId,
            dataType: 'json',
            success: (data) => {
                console.log(data);
                let res = data.data;
                $('#student_name').val(res.name);
                $('#student_age').val(res.age);
                $('#student_score').val(res.score);
                $('#student_add').val(res.address);
                if (res.gender == '男') {
                    $('#male').attr('checked', true)
                } else {
                    $('#female').attr('checked', true)
                }
                //渲染页面
                newform.render()
            }
        })
    }
    render() {
        $('#content').html(`
        <div style="margin: 30px 10px 0 20px " id='nav'>
        <span class="layui-breadcrumb">
            <a>种猪培训班</a>
            <a>种猪一班</a>
            <a>查询种猪</a>
         </span>
         <hr/>
        </div>
        <h1 style="margin: 10px 10px 0 20px ">查询种猪</h1>
        <hr/>
        <div style='width:300px;margin:auto'>
        <form class="layui-form" action="" lay-filter="formTest" >
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" name="title" readonly required lay-verify="required" placeholder="请输入姓名" autocomplete="off"
                    class="layui-input" id="student_name">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input type="text" name="title" readonly required lay-verify="required" placeholder="请输入年龄" autocomplete="off"
                    class="layui-input" id="student_age">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block" >
                <input type="radio" name="sex" disabled id='male' value="男" title="男" lay-filter='gender'>
                <input type="radio" name="sex" disabled id='female' value="女" title="女" lay-filter='gender'>
          </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">成绩</label>
            <div class="layui-input-block">
                <input type="text" name="title" readonly required lay-verify="required" placeholder="请输入成绩" autocomplete="off"
                    class="layui-input" id="student_score">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">地址</label>
            <div class="layui-input-block">
                <input type="text" name="title" readonly required lay-verify="required" placeholder="请输入地址" autocomplete="off"
                    class="layui-input" id="student_add">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
            <button type='button' id='backBtn' class="layui-btn" lay-submit lay-filter="formDemo">返回</button>
            </div>
        </div>
        </form>
        </div>
        `)
    }


    handle() {
        $("script[type='module']").append(`
        //获得表单
        var newform=null;
        <script>
        //Demo
        layui.use(['element','form'], function(){
            var form = layui.form,
            element = layui.element;
            //获取表单
            newform=form
            element.render('#nav')
            });
        </script>
        `)
        $('#backBtn').click(() => {
            window.location.hash = '#/Main/student'
        })
    }
}